import React, { FC, useEffect, useState } from "react";
import AnnularChart from "@/components/AnnularChart";
import styles from "./css/annular_other.module.scss";
import useGetOperateData from "@/hooks/useGetOperateData";
import type {
  AnnularColorInterface,
  ChartPropsType,
} from "@/types/echartInterface";
import { Empty } from "antd";
const AnnularOtherView: FC<ChartPropsType> = (props: ChartPropsType) => {
  const [sum, setSum] = useState<number>(0);
  const [fragramSum, setFragramSum] = useState<number>(0);
  const { times = "" } = props;
  const { annularList, fragramList } = useGetOperateData();
  const colorList: AnnularColorInterface = {
    升级成功台次: ["#4292FF", "#7DBAFF"],
    升级失败台次: ["#207e8e", "#5ddeE6"],
  };

  const AnnularStyle = {
    width: "350px",
    height: "300px",
  };
  useEffect(() => {
    setSum(0);
    setFragramSum(0);
    annularList?.forEach((item: any) => {
      setSum((sum) => {
        return sum + item.value;
      });
    });
    fragramList?.forEach((item: any) => {
      setFragramSum((fragramSum) => {
        return fragramSum + item.value;
      });
    });
  }, [annularList, fragramList, times]);
  return (
    <div className={styles.container}>
      {(!sum || !fragramSum) && (
        <div className={styles.no_data}>
          <Empty />
        </div>
      )}
      {sum >0 && (
        <AnnularChart
          title="当日设备升级数"
          annularChartStyle={AnnularStyle}
          annularList={annularList}
          colorList={colorList}
          text={sum + ""}
        />
      )}
      {fragramSum >0 && (
        <AnnularChart
          title="当日边缘框架升级数"
          annularChartStyle={AnnularStyle}
          annularList={fragramList}
          colorList={colorList}
          text={fragramSum + ""}
        />
      )}
    </div>
  );
};

export default AnnularOtherView;
